<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demo</title>
    <!--<script src="/plugins/cropper-master/js/require.js"></script>-->

    <link href="/plugins/bootstrap/bootstrap.min.css" rel="stylesheet"/>
    <link href="/plugins/cropper/css/cropper.min.css" rel="stylesheet"/>
    <link  href="/plugins/cropper/css/main.css" rel="stylesheet"/>

    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script><!-- jQuery is required -->
    <script src="/plugins/form/jquery.form.min.js"></script>
    <script src="/plugins/bootstrap/bootstrap.min.js"></script>
    <script src="/plugins/cropper/js/cropper.min.js"></script>
    <script src="/plugins/cropper/js/main.js"></script>
</head>
<body>

<!--<form id="image_upload" method="POST" enctype="multipart/form-data" action="/imgCut">-->
    <!--<p>文件：-->
        <!--<input type="file" id="file" name="file" />-->
        <!--<input type="hidden" id="cut_data" />-->
        <!--<input type="submit" value="上传"/>-->
    <!--</p>-->

    <!--<div class="container" data-method="getCroppedCanvas" data-original-title="getCroppedCanvas">-->
        <!--<img id="image" style="width: 60%" src="/images/59303187_p0.jpg"/>-->
    <!--</div>-->

<!--</form>-->






<form action="/client_start">
    <p style="padding: 3px" align="center"><input id="command" name="command" type="text" style="width: 50%" placeholder="请求内容"/></p>
    <p style="padding: 3px" align="center"><textarea rows="5" style="width: 50%" placeholder="返回信息"></textarea></p>
    <p style="padding: 3px" align="center"><input type="submit"/></p>
</form>

<script>
//    $.fn.cropper();
//    $('#image').cropper({
//        aspectRatio: 1 / 1,
//        crop: function(e) {
//
//            /*
//            * x：剪裁区域左侧的偏移。
//            * y：剪裁区域距上部的偏移。
//            * width：剪裁区域的宽度。
//            * height：剪裁区域的高度。
//            * rotate：图片的旋转角度。
//            * */
//            $('#cut_data').val("{ \"left\": " + e.x + "," + e.y + "," + e.width + "," + e.height + "," + e.rotate + "}");
//
//            console.log(e.x);
//            console.log(e.y);
//            console.log(e.width);
//            console.log(e.height);
//            console.log(e.rotate);
//        },
//        background:false,
//    });

//    function update_image(){
//        var file = document.getElementsByName("file");
//
//        /*Windows 系统下*/
//        document.getElementById("image").src = file[0].value;
//    }

//    function upload(){
//        $.ajax({
//            type:"post",
//            url:"/fileUpload/handle",
//            fileElementId:"file",
//            data:$('#image_upload').serialize(),
//            success:function(data){
//                $('#image').setAttribute('src',data['image_path']);
//            }
//        });
//    }

//    $('#image_upload').ajaxSubmit({
//        type:"post",
//        url:"",
//        fileElementId:"file",
//        data:$('#image_upload').serialize(),
//        success:function(data){
//            $('#image').setAttribute('src',data['image_path']);
//        }
//    })
</script>
</body>
</html>